<template>
  <ul class="radio-type">
    <li v-for="types in listType" :key="types?.id">
      <home-nav
          :title="types?.title"
          @jumpPlaylist="jumpPlaylist(types)"
      />
      <div class="grid grid-cols-2 gap-4">
        <div v-for="lists in types?.list" :key="lists?.id" :class="store.isFlag ? 'flex' : ''">
          <div class=" cursor-pointer" @click="jumpDjRadio(lists?.id)" :class="store.isFlag ? 'w-40 h-40 mr-3' : ''">
            <img class="w-full h-full" :src="lists?.intervenePicUrl" alt="">
          </div>
          <div class="flex flex-col justify-around flex-1">
            <span class="text-2xl yu-textColor-hover cursor-pointer" @click="jumpDjRadio(lists?.id)" :class="store.isFlag ? '' : 'mb-2'">{{ lists?.name }}</span>
            <span class="yu-titleColor">{{ lists?.rcmdtext }}</span>
          </div>
        </div>
      </div>
    </li>
  </ul>
</template>

<script setup>
import HomeNav from '@/components/HomeNav/index.vue'
import {reactive, toRefs} from "vue";
import {useStore} from "@/store/index";



const store = useStore()


const data = reactive({
  listType: [], // 获取数据
  allData: false,  // 监听是否获取数据完成
  radioType: [
    {
      type: 2,
      title: '音乐推荐 · 电台'
    },
    {
      type: 6,
      title: '生活 · 电台'
    },
    {
      type: 3,
      title: '情感 · 电台'
    },
    {
      type: 2001,
      title: '创作翻唱 · 电台'
    },
    {
      type: 11,
      title: '知识 · 电台'
    }
  ]
})

const {listType, allData} = toRefs(data)

// 获取 多种类型电台然后整合在一起
const getRecommendData = () => {

  data.radioType.forEach(async item => {
    // 每个数组中的数据标题id等
    const everyType = {
      title: '',
      id: null,
      list: []
    }
    // id: 2 音乐 id: 6 生活 id:3 情感 id: 2001 创作翻唱
    await store.getDjRecommendType(item.type).then(djRadios => {
      everyType.title = item.title
      everyType.id = item.type
      everyType.list = djRadios.slice(0, 4)
      // console.log(djRadios)
    })
    data.listType.push(everyType)
  })
}
getRecommendData()

const $emit = defineEmits(['jumpDjRadio', 'selectRadioType'])
// 跳转到电台详情
const jumpDjRadio = (id) => {
  $emit('jumpDjRadio', id)
}

// 点更多选中电台类型
const jumpPlaylist = (types) => {
  $emit('selectRadioType', types)
}


</script>

<style scoped>

</style>
